Vue / Vuetify - Неизвестный пользовательский элемент: <v-app> - вы правильно зарегистрировали компонент?

Question

Я новичок в Vue и Vuetify.Я только что создал быстрое приложение, чтобы проверить их обоих.Но я сталкиваюсь с проблемами в начале.Vue не может определить компоненты Vuetify, несмотря на выполнение всех шагов, изложенных в документе.Ошибка как показано ниже -

vue.runtime.esm.js? Ff9b: 587 [Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите параметр «имя».

находится в

---> в src \ App.vue

Вы можете получить доступвесь код в песочнице https://codesandbox.io/s/40rqnl8kw

Answer 1

Другая возможная проблема заключается в том, что если у вас включен режим а-ля-карт, вам нужно будет также указать все компоненты, которые вы хотите включить:

Редактировать: похоже, VuetifyLoader автоматически сделает это дляВы

https://vuetifyjs.com/en/framework/a-la-carte

import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar,
  VFadeTransition
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VToolbar,
    VFadeTransition
  },
  directives: {
    Ripple
  }
})

Answer 2

Вероятно, у вас возникла проблема с порядком ваших операций.Например, вы определяете свой собственный компонент App, который использует компонент v-app, прежде чем вы даже попросили Vue использовать его, поэтому Vue предполагает, что вы используете свой собственный компонент v-app.

Поместите Vue.use(Vuetify) перед запуском любых экземпляров Vue (через new Vue(), для которых требуются компоненты Vuetify, или поместите его в сами определения компонентов прямо вверху тега <script> после импорта Vue и Vuetify в одном файлеНе беспокойтесь, если у вас более одного оператора Vue.use(Vuetify), потому что только первый из них будет делать что-либо - все последующие вызовы просто ничего не сделают.

Вот пример исправления в порядке операций:https://codesandbox.io/s/m9jpw517op

---

Для предоставления фрагмента кода здесь в случае разрыва ссылки в будущем:

Оригинал - Vue.use() называетсядо new Vue(), что приводит к ошибке.

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

Vue.use(Vuetify);

Fix - вызов new Vue() после Vue.use() позволяет Vue правильно разрешить зависимость.

Vue.use(Vuetify);

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

---

Редактировать: Этот ответ был изменен после его принятия, чтобы исправить неточность, которая может ввести в заблуждение будущих читателей, свести к минимуму изменения в примере кода ради простоты и избежать того, чтобы данное исправление сталонедоступен, если веб-сайт codesandbox становится недоступным.